<template>
    <div class="table-page">
        <!--        <div class="table-operation-box">-->
        <!--            <el-button-->
        <!--                type="primary"-->
        <!--                plain-->
        <!--                style="margin-bottom: 2em"-->
        <!--                icon="el-icon-plus"-->
        <!--                @click="go('./agentManageUserAdd')"-->
        <!--            >新增客服-->
        <!--            </el-button-->
        <!--            >-->

        <!--        </div>-->
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                :tree-props="{children: 'children'}"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="name" label="昵称"></el-table-column>



                <el-table-column prop="mobile" label="手机号"></el-table-column>
                <el-table-column
                    prop="levelName"
                    label="代理商等级"
                ></el-table-column>

                <el-table-column prop="banance" label="余额">
                    <template slot-scope="scope">
                        {{ priceChange(scope.row.banance) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="accumulativeRecharge"
                    label="累计充值"
                >
                    <template slot-scope="scope">
                        {{ priceChange(scope.row.accumulativeRecharge) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cumulativeConsumption"
                    label="累计消费"
                >
                    <template slot-scope="scope">
                        {{ priceChange(scope.row.cumulativeConsumption) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    width="180"
                >
                </el-table-column>

                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scope">
                        <k-tag :tag="userStatus[scope.row.userStatus]"></k-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    width="300"
                    align="center"
                    fixed="right"
                    v-if="userRoles.includes('agentManage:add')"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.parentId"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="go('agentManageUserAdd?pid=' + scope.row.id)"
                        >添加客服</el-button>

                        <el-button
                            v-show="haveRole('agentManage:edit')"
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="go('agentManageUserEdit?flag=true&id=' + scope.row.id)"
                        >编辑
                        </el-button>

                        <el-button
                            :loading="scope.row.opLoading"
                            class="warning"
                            type="text"
                            size="mini"
                            icon="el-icon-refresh-right"
                            @click="resetPass(scope.row)"
                            >重置密码
                        </el-button>

                        <el-button
                            v-if="scope.row.userStatus === 'normal' && scope.row.parentId != null && scope.row.parentId !== '' "
                            :loading="scope.row.opLoading"
                            type="text"
                            size="mini"
                            class="warning"
                            icon="el-icon-lock"
                            @click="changeUserStatus(scope.row, false)"
                            >禁用
                        </el-button>
                        <el-button
                            v-if="scope.row.userStatus === 'lock' && scope.row.parentId != null && scope.row.parentId !== ''"
                            :loading="scope.row.opLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-unlock"
                            @click="changeUserStatus(scope.row, true)"
                            >启用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { execCall, TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree, beanCopy } from "@/utils/index.js";
import { get, put, post } from "@/api/request";
import { fetchAgentLevelList } from "@/api/user";

export default {
    name: "AgentUserManageList",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: "",
                mobile: "",
                role: false,
                position: true,
                positionId: null,
                showLevel: true
            },
            positionList: null,
            levelList: null,
            dataForm: {
                agentId: null,
                id: null,
                remark: null,
                type: null,
                amount: null,
                banance: 100
            },
            initDataForm: {
                agentId: null,
                id: null,
                remark: null,
                type: null,
                amount: null,
                banance: 100
            }
        };
    },
    computed: {
        ...mapState({
            userStatus: state => state.status.userStatus,
            userRoles:state=>state.user.roles
        })
    },
    created() {
        // this.loadPosition();
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/agent/user/current-page", queryData);
        },
        priceChange(number) {
            if(!number){
                return "0.00元";
            }
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
        async batchLock(status) {
            if (!status) {
                await this.$confirm("确定禁用这些账号吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }
            this.tableData
                .filter(v => this.tableSelect.includes(v.id))
                .forEach(v => this.changeUserStatus(v, status));
        },
        changeUserStatus(data, status) {
            data.opLoading = true;
            post(`/user/cu/agent/user/enable/${status}/${data.id}`)
                .then(res => {
                    data.userStatus = status ? "normal" : "lock";
                    data.opLoading = false;
                })
                .finally(() => {
                    data.opLoading = false;
                });
        },
        loadPosition() {
            get("/user/cu/admin/position/owner-list").then(res => {
                this.positionList = treeList2Tree(res);
            });
        },
        async resetPass(row) {
            await this.$confirm("确定将密码重置为tk123456吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            });
            post(`/user/cu/user/change/password-admin/${row.id}`, {
                newPassword: "tk123456"
            })
                .then(() => {
                    this.$message.success("重置成功");
                })
                .catch(e => {
                    this.$message.error("重置失败");
                });
        }
    }
};
</script>

<style lang="scss" scoped></style>
